<template>
  <div class="leave-msg-content">
    <div class="title-box pd10">
      <span>{{ detail.typeName }}</span>
      <span>&nbsp;|&nbsp;</span>
      <span>{{ detail.title }}</span>
    </div>
    <div class="sub-infos-box pd10">
      <span style="margin-right: 10px">{{ getTime(detail.createTime) }}</span>
      <span>留言类型: {{ detail.typeName }}</span>
    </div>
    <div class="reply-detail pd10" v-html="detail.remark">
      <!-- 随便输入点什么内容，看下样式是怎么样的~ -->
      <!-- <span class="row-box title">恭喜您，您投递的XXX获得面试邀约: </span>
            <div class="row-box">
                <span class="title">面试时间: </span>
                <span>2022-02-02</span>
            </div>
            <div class="row-box">
                <span class="title">面试方式: </span>
                <span>线下面试</span>
            </div>
            <div class="row-box">
                <span class="title">面试城市: </span>
                <span>深圳市</span>
            </div>
            <div class="row-box">
                <span class="title">详细地址: </span>
                <span>南山区110号</span>
            </div>
            <div class="row-box">
                <span class="title">其他: </span>
                <span>无</span>
            </div> -->
    </div>
    <div class="contacts contact-name pd10" v-if="detail.type !== 1">
      <span class="title">联系人名称</span>
      <span class="value">{{ detail.studentName }}</span>
    </div>
    <div class="contacts contact-number pd10" v-if="detail.type !== 1">
      <span class="title">联系人电话</span>
      <span class="value">{{ detail.phone }}</span>
    </div>
    <div class="contacts files pd10" v-if="detail.fileUrl">
      <span class="title">附件:&nbsp;{{ getFileName(detail.fileUrl) }}</span>
      <span class="down-btn" @click="downLoad">下载</span>
    </div>
    <div
      class="ask-answer-box"
      v-for="(item, i) in detail.messageInfoRespDTOList"
      :key="i"
    >
      <div class="time">
        <span>回复时间: {{ getTime(item.createTime) }}</span>
        <span>{{ item.replyType === "1" ? item.reply : "平台运营" }}</span>
        <!-- <span></span> -->
      </div>
      <p class="content">{{ item.remark }}</p>
    </div>
    <div class="reply-box" v-if="isShowReplyBox">
      <span class="title">回复</span>
      <el-input
        type="textarea"
        v-model="remark"
        :rows="6"
        placeholder="请输入回复内容"
      ></el-input>
    </div>
    <div class="submit-btn" v-if="isShowReplyBox">
      <span class="btn" @click="handleReply">提交</span>
    </div>
  </div>
</template>
<script>
import { formatDate } from "@/utils/utils";
export default {
  props: ["detail"],
  data() {
    return {
      remark: "",
    };
  },
  computed: {
    isShowReplyBox() {
      // <!-- 消息状态 0 学生发起运营未读 1运营已读 2运营回复 学生未读 3学生已读 4学生回复运营未读 5系统消息未读 6 系统消息已读 -->
      return (
        (this.detail.status === "2" || this.detail.status === "3") &&
        this.detail.type !== 1
      );
    },
  },
  methods: {
    getTime(value) {
      return formatDate(new Date(value));
    },
    getFileName(link) {
      if (!link) {
        return "";
      }
      const nameALl = link.split("com/")[1];
      let allList = nameALl.split("-");
      let nameList = allList.slice(0, allList.length - 1);
      let str = "";
      if (nameList && nameList.length > 1) {
        nameList.forEach((v) => {
          str = str + (str ? "-" : "") + v;
        });
      } else if (nameList.length === 1) {
        str = nameList[0];
      }
      return str.indexOf("zip") > -1 ? str : str + ".zip";
    },
    downLoad() {
      this.downloadExportFile(
        this.detail.fileUrl,
        this.getFileName(this.detail.fileUrl)
      );
    },
    downloadExportFile(blob, tagFileName) {
      let downloadElement = document.createElement("a");
      let href = blob;
      if (typeof blob == "string") {
        downloadElement.target = "_blank";
      } else {
        href = window.URL.createObjectURL(blob); //创建下载的链接
      }
      downloadElement.href = href;
      downloadElement.download =
        tagFileName +
        //下载后文件名
        document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      if (typeof blob != "string") {
        window.URL.revokeObjectURL(href); //释放掉blob对象
      }
    },
    handleReply() {
      this.$emit("handleReply", {
        remark: this.remark,
        clearRemark: () => {
          this.remark = "";
        },
      });
    },
  },
};
</script>
<style lang="less">
.leave-msg-content {
  .reply-detail {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    font-weight: 400;
    color: #666;
    line-height: 31px;
    overflow: hidden;
    min-height: 60px;
    margin-bottom: 80px;
    font-family: PingFangSC-Regular, PingFang SC;
    text-overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
    .row-box {
      margin-bottom: 10px;

      .title {
        color: #9597a0;
        margin-right: 5px;
      }
    }
  }
}
</style>
<style lang="less" scoped>
.leave-msg-content {
  width: 50%;
  display: flex;
  flex-direction: column;

  .pd10 {
    padding: 0 10px;
  }

  .title-box {
    font-size: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #37383d;
  }

  .sub-infos-box {
    font-size: 16px;
    font-weight: 400;
    color: #9597a0;
    padding-bottom: 15px;
    border-bottom: 1px solid #d4d6da;
    margin-bottom: 13px;
  }

  .reply-detail {
    font-size: 18px;
    font-weight: 400;
    color: #37383d;
    line-height: 31px;
    min-height: 60px;
    margin-bottom: 80px;
  }
  .contacts {
    margin-bottom: 20px;
    .title {
      font-size: 16px;
      font-weight: 400;
      color: #9597a0;
      margin-right: 70px;
    }

    .value {
      font-size: 15px;
      font-weight: 400;
      color: #37383d;
    }

    .down-btn {
      font-size: 16px;
      font-weight: 400;
      color: #3d6cb0;
      cursor: pointer;
    }
  }

  .ask-answer-box {
    background: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #f0f0f0;
    padding: 25px 20px;
    margin-bottom: 20px;

    .time {
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      height: 21px;
      font-size: 15px;
      font-weight: 400;
      color: #9597a0;
    }

    .content {
      font-size: 18px;
      font-weight: 400;
      color: #37383d;
    }
  }

  .reply-box {
    margin-top: 55px;
    display: flex;
    flex-direction: column;
    .title {
      font-size: 20px;
      font-weight: 500;
      color: #37383d;
      margin-bottom: 15px;
    }
  }
  .submit-btn {
    display: flex;
    justify-content: center;

    .btn {
      margin-top: 30px;
      width: 144px;
      height: 52px;
      line-height: 52px;
      text-align: center;
      color: white;
      background: #3d6cb0;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}
</style>
